<template>
  <div class="source-button" @click="gotoSource">
    <img class="icon" src="/static/icon/source.svg" alt="" />
    <img class="arrow" src="/static/icon/right-arrow.svg" alt="" />
  </div>
  <div class="service">
    <div class="cover">
      <img v-if="service.homeImage" :src="handleProxy(service.homeImage)" alt="" />
    </div>
    <div class="body">
      <div class="item" v-for="(item, index) in serviceChildren" :key="item.id">
        <div class="header">
          <img class="icon" :src="icons[index % icons.length]" alt="" />
          <div class="dot" :style="{ background: background }"></div>
          <div class="title">
            {{ item.name }}
            <div class="line" :style="{ background: background }"></div>
          </div>
        </div>
        <div class="description">{{ item.description }}</div>
        <template v-if="item.children && item.children.length">
          <div
            :class="{ children: true, origin: seed === 0 }"
            v-for="child in item.children"
            :key="child.id"
            @click="gotoDetail(child.id)"
          >
            <div class="text">{{ child.name }}</div>
            <img class="right" src="/static/service/right.svg" alt="" v-if="seed === 1" />
            <img class="right" src="/static/service/right-origin.svg" alt="" v-else />
          </div>
        </template>
        <template v-else>
          <div :class="{ button: true, origin: seed === 0 }" @click="gotoDetail(item.id)">点我了解</div>
        </template>
      </div>
    </div>
  </div>
</template>
<script setup>
wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline'],
})
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getServiceList, handleProxy } from '@/api/data'
const gotoSource = () => {
  uni.redirectTo({
    url: '/pages/source/source',
  })
}
const service = ref({})
const serviceChildren = computed(() => {
  return service.value.children || []
})
const icons = [
  '/static/service/vector.svg',
  '/static/service/pc.svg',
  '/static/service/board.svg',
  '/static/service/book.svg',
]
onLoad((e) => {
   getServiceList(e.name).then((res) => {
    if(e.serviceId){
      const target = res.data.data.find(item => item.id === parseInt(e.serviceId))
      if(target){
        service.value = target
        uni.setNavigationBarTitle({
          title: target.name,
        })
      }
      return
    }
    const data = res.data.data[0]
    service.value = data
    uni.setNavigationBarTitle({
      title: data.name,
    })
  })
})
const seed = ref(Math.random() < 0.5 ? 1 : 0)
const background = computed(() => {
  return seed.value
    ? 'linear-gradient(90deg, rgba(48, 209, 230, 0) 0%, #44D4A8 100%)'
    : 'linear-gradient(90deg, rgba(255, 131, 64, 0) 0%, #FF9C66 100%)'
})
const gotoDetail = (id) => {
  uni.navigateTo({
    url: `/pages/service-detail/service-detail?id=${id}`,
  })
}
</script>

<style lang="scss">
.service {
  .cover {
    width: 750rpx;
    height: 240rpx;
	padding-left: 6%;
	padding-right: 6%;
// box-shadow: 0px 8rpx 16rpx 0px #00000040;
	
	
  }
  .body {
    padding: 32rpx 24rpx;
    display: flex;
    flex-direction: column;
    gap: 32rpx;
    .item {
      width: 100%;
      border-radius: 24rpx;
      background: #fff;
      padding: 24rpx;
      display: flex;
      flex-direction: column;
      gap: 16rpx;
      .header {
        height: 44rpx;
        display: flex;
        align-items: center;
        gap: 12rpx;
        position: relative;
        .icon {
          width: 40rpx;
          height: 40rpx;
          flex-shrink: 0;
          position: relative;
          z-index: 1;
        }
        .dot {
          position: absolute;
          left: 20rpx;
          top: 20rpx;
          background: linear-gradient(0deg, #44d4a8 0%, #30d1e6 100%);
          width: 24rpx;
          height: 24rpx;
          opacity: 33%;
          border-radius: 50%;
        }
        .title {
          position: relative;
          font-family: PingFang SC;
          font-weight: 500;
          font-style: Medium;
          font-size: 30rpx;
          color: #323333;
          .line {
            position: absolute;
            background: linear-gradient(90deg, rgba(48, 209, 230, 0) 0%, #44d4a8 100%);
            width: 60rpx;
            height: 6rpx;
            border-radius: 8rpx;
            bottom: -4rpx;
            right: -8rpx;
          }
        }
      }
      .description {
        font-family: PingFang SC;
        font-weight: 400;
        font-style: Regular;
        font-size: 24rpx;
        color: #969799;
      }
      .children {
        padding: 24rpx;
        background: #f7f8fa;
        border-radius: 12rpx;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .text {
          color: #323333;
          font-family: PingFang SC;
          font-weight: 400;
          font-style: Regular;
          font-size: 28rpx;
        }
        .right {
          width: 48rpx;
          height: 48rpx;
        }
        &.origin {
          background: #ffffff;
          border: 1px solid #0000000f;
          .text {
            font-family: PingFang SC;
            font-weight: 400;
            font-style: Regular;
            font-size: 14px;
            color: #646566;
          }
        }
      }
      .button {
        border-radius: 12rpx;
        border: 2rpx #f2f3f5 solid;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-style: Regular;
        font-size: 28rpx;
        color: #323333;
        &.origin {
          color: #5291f0;
        }
      }
    }
  }
}
</style>
